<template>
	<view class="write-offs-detail">
		<view class="section_1">
			<view class="section_2">
				<view class="flex-space-between">
					<view>
						<view class="text_2">篮球半场2小时(12次)</view>
						<view class="text_3">篮球场</view>
					</view>
					<van-image src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391248292821464936.png" width="82rpx" height="82rpx" />
				</view>
				
				<view class="section_3 flex-space-between">
					<text class="text_4">1564654656bg</text>
					<text class="text_5">心心念念(187****9856)</text>
				</view>
			</view>
		</view>
			
		<view class="section_4">
			<view class="section_5">
				<view class="row flex-space-between">
					<view class="flex-align">
						<van-image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391248299655103664.png"
							width="25rpx"
							height="25rpx"
						/>
						<view class="label">2020-10-17 19:37:06</view>
					</view>
				</view>
				<view class="row flex-space-between">
					<view class="flex-align">
						<van-image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391248293965360200.png"
							width="27rpx"
							height="27rpx"
						/>
						<view class="label">核销:卡次数-1</view>
					</view>
					<view class="value">剩余<text style="color: rgb(51,51,51);">2</text>次</view>
				</view>
				<view class="row flex-space-between">
					<view class="flex-align">
						<van-image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391248300824290632.png"
							width="25rpx"
							height="25rpx"
						/>
						<view class="label">黄武</view>
					</view>
					<view class="value">核销机器085</view>
				</view>
			</view>
			
			<view class="section_6">
				<view class="title">核销信息</view>
				
				<van-image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391248298478006396.png"
					width="100%"
					height="1px"
				/>
				
				<view class="list">
					<view v-for="(item, index) in list" :key="index" class="row flex-space-between">
						<view class="label">{{ item.label }}</view>
						<view class="value">{{ item.value }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn">
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)" @click="onClick">反核销</van-button>
		</view>
		
		<config-alert title="驳回" v-model="show" @confirm="onConfirm"></config-alert>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			list: [
				{ label: '核销卡号', value: '1564654656bg' },
				{ label: '商品名称', value: '篮球半场两小时 ×1' },
				{ label: '剩余次数', value: '2次' },
				{ label: '核销人', value: '黄武' },
				{ label: '核销地点', value: '一号篮球场' },
				{ label: '核销时间', value: '2020-10-17' },
				{ label: '核销方式', value: '刷卡核销' },
				{ label: '核销机器编号', value: '0856' },
			]
		}
	},
	methods: {
		onClick() {
			this.show = true;
		},
		onConfirm(value) {
			this.show = false;
			uni.navigateTo({
				url: '/page_admin/mobile-write-offs/mobile-write-offs'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.write-offs-detail {
	min-height: 100vh;
	background-color: rgb(243, 243, 243);
	padding-bottom: 130rpx;
	
	.section_1 {
		padding: 20rpx 30rpx;
		background-color: rgb(255,255,255);
	}
	
	.section_2 {
		padding: 45rpx 40rpx;
		background-color: rgb(75,164,255);
		border-radius: 16rpx;
		color: rgb(255,255,255);
		
		.text_2 {
			font-size: 36rpx;
			font-weight: 500;
			line-height: 34rpx;
		}
		
		.text_3 {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 26rpx;
			margin-top: 30rpx;
		}
	}
	
	.section_3 {
		font-size: 28rpx;
		margin-top: 30rpx;
	}
	
	.section_4 {
		padding: 20rpx;
	}
	
	.section_5 {
		padding: 10rpx 20rpx;
		background-color: rgb(255,255,255);
		box-shadow: 0px 0px 9rpx rgba(0,0,0,0.05);
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		
		.row {
			margin: 20rpx 0;
		}
		
		.label {
			margin-left: 15rpx;
			font-weight: bold;
		}
		
		.value {
			color: rgb(136,136,136);
		}
	}
	
	.section_6 {
		background-color: rgb(255,255,255);
		box-shadow: 0px 0px 9rpx rgba(0,0,0,0.05);
		border-radius: 16rpx;
		margin-top: 20rpx;
		
		.title {
			padding: 30rpx 20rpx 0;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 28rpx;
		}
		
		.list {
			padding: 20rpx 20rpx 1rpx;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 25rpx;
		}
		
		.row {			margin-bottom: 30rpx;		}
		
		.value {
			color: rgb(136,136,136);
		}
	}
	
	.btn {
		position: fixed;
		bottom: 40rpx;
		left: 0;
		width: 100%;
		padding: 0 40rpx;
	}
}
</style>
